import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form, Row, Col, Button, Empty, Card, Avatar } from 'antd';
import DescriptionList from '@/components/DescriptionList';
import { ChartCard } from '@/components/Charts';
import Link from 'umi/link';
import { imageOrigin } from '../config';
import styles from './Merchant.less';
/* eslint react/no-array-index-key: 0 */
const { Description } = DescriptionList;
const { Meta } = Card;
const topColResponsiveProps = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 12,
  xl: 6,
  style: { marginBottom: 24 },
};
@connect(({ merchant, loading }) => ({
  merchant,
  loading: loading.models.list,
}))
@Form.create()
class Merchant extends PureComponent {
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'merchant/fetch',
    });
  }

  render() {
    const {
      merchant: { data, homeInfo },
      loading,
    } = this.props;
    const cardList2 = homeInfo ? (
      <Card bordered={false} loading={loading}>
        <Meta
          avatar={<Avatar src={`${imageOrigin}${data[0].imageHash}`} />}
          title={data ? data[0].name : '暂无'}
        />
        <DescriptionList size="large" title=":" style={{ marginBottom: 32 }}>
          <Description term="店铺地址">{data ? data[0].address : '暂无'}</Description>
          <Description term="店铺电话">{data ? data[0].phone : '暂无'}</Description>
          <Description term="在途佣金">
            {data ? (data[0].awaitBalance / 100).toFixed(2) : 0}
          </Description>
          <Description term="佣金比率">{data ? data[0].commissionRatio : 0}</Description>
          <Description term="总共收入">
            {homeInfo ? (homeInfo.allPrice / 100).toFixed(2) : 0}
          </Description>
          <Description term="新增收入">
            {homeInfo ? (homeInfo.allNewPrice / 100).toFixed(2) : 0}
          </Description>
          <Description term="店铺货款">{data ? (data[0].oveRall / 100).toFixed(2) : 0}</Description>
          <Description term="店铺余额">{data ? (data[0].balance / 100).toFixed(2) : 0}</Description>
          <Description term="订单笔数">{homeInfo ? homeInfo.amount : 0}</Description>
          <Description term="新增订单">{homeInfo ? homeInfo.newAmount : 0}</Description>
        </DescriptionList>
      </Card>
    ) : (
      ''
    );
    const cardList =
      data.length >= 1 ? (
        <Row gutter={24}>
          {data[0].storeType === 'store' ? (
            <Col {...topColResponsiveProps}>
              <ChartCard bordered={false} loading={loading}>
                <Button type="primary" block>
                  <Link to="/orderByMerchantB/orderByMerchantB">订单管理</Link>
                </Button>
              </ChartCard>
            </Col>
          ) : (
            <Col {...topColResponsiveProps}>
              <ChartCard bordered={false} loading={loading}>
                <Button type="primary" block>
                  <Link to="/orderByMerchant/orderByMerchant">订单管理</Link>
                </Button>
              </ChartCard>
            </Col>
          )}
          <Col {...topColResponsiveProps}>
            <ChartCard bordered={false} loading={loading}>
              <Button type="primary" block>
                <Link to="/commodityByMerchant/commodityByMerchant">商品管理</Link>
              </Button>
            </ChartCard>
          </Col>
          <Col {...topColResponsiveProps}>
            <ChartCard bordered={false} loading={loading}>
              <Button type="primary" block>
                <Link to="/couponsByMerchant/couponsByMerchant">优惠券管理</Link>
              </Button>
            </ChartCard>
          </Col>
          <Col {...topColResponsiveProps}>
            <ChartCard bordered={false} loading={loading}>
              <Button type="primary" block>
                <Link to="/setByMerchant/setByMerchant">基础设置</Link>
              </Button>
            </ChartCard>
          </Col>
          <Col {...topColResponsiveProps}>
            <ChartCard bordered={false} loading={loading}>
              <Button type="primary" block>
                <Link to="/detailsByMerchant/detailsByMerchant">提现管理</Link>
              </Button>
            </ChartCard>
          </Col>
          <Col {...topColResponsiveProps}>
            <ChartCard bordered={false} loading={loading}>
              <Button type="primary" block>
                <Link to="/bindAlipayOrbankCard/bindAlipayOrbankCard">绑定提现账号</Link>
              </Button>
            </ChartCard>
          </Col>
          <Col {...topColResponsiveProps}>
            <ChartCard bordered={false} loading={loading}>
              <Button type="primary" block>
                <Link to="/incomeByStoreId/incomeByStores">在途佣金日志</Link>
              </Button>
            </ChartCard>
          </Col>
        </Row>
      ) : (
        <Empty description="您还未拥有店铺" />
      );
    return (
      <div className={styles.coverCardList}>
        <div className={styles.cardList}>{cardList2}</div>
        <div className={styles.cardList}>{cardList}</div>
      </div>
    );
  }
}

export default Merchant;
